<template>
    <div class="video-background">
        <h1
            style="
                text-align: center;
                color: white;
                font-size: 32px;
                font-weight: 600;
                margin: 20px 0;
                z-index: 100;
                 background-color: transparent !important;
            "
        >
            训练成绩管理
        </h1>
        <video autoplay muted loop id="bg-video">
            <source src="/background.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
        <!-- 添加 logo -->

        <div style="margin:0 20px;">
            <router-link to="/">
                <el-button type="primary" style="margin-right: 20px;">主页</el-button>
            </router-link>
            <router-link to="/personalTraining">
                <el-button type="primary" style="margin-right: 20px;">人员名册</el-button>
            </router-link>
            <router-link to="/subject">
                <el-button type="primary" style="margin-right: 20px;">科目</el-button>
            </router-link>
            <router-link to="/score" style="margin-left: 1000px">
                <el-button type="primary" style="margin-right: 20px;">成绩录入</el-button>
            </router-link>

            <router-view></router-view>
        </div>
    </div>


</template>
<script lang="ts" setup>
import {ref, reactive} from "vue";
import JoinRate from "./components/JoinRate.vue";

const dialogSubjectVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
    name: "",
    grades: [
        {
            grade: "优秀",
            min: "",
            max: "",
        },
        {
            grade: "良好",
            min: "",
            max: "",
        },
        {
            grade: "及格",
            min: "",
            max: "",
        },
        {
            grade: "不及格",
            min: "",
            max: "",
        },
    ],
});

const handleClick = (tab, event) => {
    console.log(tab, event);
};
</script>

<style scoped>
.video-background {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
